<div class="row">
    <div class="col16 first last">
        <h4>留言板列表</h4>
        
        <?php if (!$list) { ?>
        <p>还没有任何留言。。。</p>
        <?php } else {  foreach ($list as $note) { ?>
        <p>
            <?php echo HTML::escape($note['username']); ?>: <em>“
            <?php echo nl2br(HTML::escape($note['message'])); ?>”</em>
            &nbsp;&nbsp;<small><?php echo date('Y-m-d H:i:s', $note['create_time']); ?></small>
        </p>
        <?php } } ?>
        
        <?php echo $pagination; ?>
    </div>
</div>
<div class="row">
    <div class="col8 first last">
        <h4>发布留言</h4>
        
        <label>用户名</label>
        <input type="text" name="username" value="Guest" maxlength="20" />
        
        <label>信息</label>
        <textarea name="message" placeholder="请不要超过160字" maxlength="160" rows="3"></textarea>
        
        <input type="hidden" name="token" value="<?php echo $csrfToken;?>" />
        <button id="btn-post">发布</button>
        &nbsp;&nbsp;<span id="post-tips"></span>
    </div>
</div>

<script type="text/javascript">

var showPostTips = function(tips) {
    jQuery('#post-tips').html(tips).show();
    setTimeout(function() {
        jQuery('#post-tips').fadeOut();
    }, 2000);
};
jQuery('#btn-post').click(function() {
    
    jQuery(this).prop("disabled", true);
    
    var username = jQuery('input[name=username]').val();
    var message = jQuery('textarea[name=message]').val();
    var token = jQuery('input[name=token]').val();
    
    if (!username || !message) {
        showPostTips('请输入用户名和信息后再提交！');
        jQuery(this).prop("disabled", false);
        return;
    }
    
    var param = {
        username: username,
        message: message,
        token: token
    };
    jQuery.post('/note/post', param, function(ret) {
        if (ret.code !== 0) {
            showPostTips(ret.message);
            jQuery(this).prop("disabled", false);
            return;
        }
        showPostTips("发布成功！");
        location.reload();
    }, 'json');
});

</script>
